<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yy</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            display: none;
        }
    </style>
</head>

<body>
    <!-- 3、实现下面的功能（阻止事件冒泡）：
        3.1. 点击一个按钮，显示一个容器盒子；
        3.2. 点击容器，容器背景颜色改变；
        3.3. 点击容器中的按钮，容器隐藏。 -->
    <button class="show">显示</button>
    <div class="box">
        <button class="hidden">关闭</button>
    </div>
    <script>
        let show = document.querySelector(".show");
        let box = document.querySelector(".box");
        let hidden = document.querySelector(".hidden");
        show.onclick = function() {
            box.style.display = "block";
        }
        hidden.onclick = function(e) {
            box.style.display = "none";
            e.stopPropagation();
        }
        box.onclick = function() {
            this.style.backgroundColor = "red";
        }
    </script>
</body>

</html>